<template>
  <div class="order-list">
    <div class="header">
      <h2>订单列表</h2>
      <el-button @click="$router.back()" type="primary" size="small">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
    </div>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="orderId" label="订单号" width="100" />
      <el-table-column prop="totalPrice" label="总价" width="120">
        <template #default="{ row }">
          ¥{{ Number(row.totalPrice).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="订单详情">
        <template #default="{ row }">
          <el-table :data="row.details" border size="small">
            <el-table-column prop="bookName" label="书名" />
            <el-table-column prop="quantity" label="数量" width="80" />
            <el-table-column prop="price" label="单价" width="100">
              <template #default="{ row }">
                ¥{{ Number(row.price).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import request from '@/utils/request'

interface OrderDetail {
  bookId: number
  orderId: number
  bookName: string
  quantity: number
  price: number
}

interface Order {
  username: string
  userId: number
  orderId: number
  totalPrice: number
  status: string
  createTime: string
  details: OrderDetail[]
}

const orders = ref<Order[]>([])

// 获取订单状态对应的标签类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    '0': 'info',    // 待支付
    '1': 'warning', // 已支付
    '2': 'primary', // 已发货
    '3': 'success'  // 已完成
  }
  return statusMap[status] || 'info'
}

// 获取订单状态对应的文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    '0': '待支付',
    '1': '已支付',
    '2': '已发货',
    '3': '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单列表
const fetchOrders = async () => {
  try {
    const res = await request.get('/user/order/list')
    if (res.code === 1) {
      orders.value = res.data
    } else {
      ElMessage.error(res.msg || '获取订单列表失败')
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败')
  }
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.order-list {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
}

:deep(.el-table__expanded-cell) {
  padding: 20px !important;
}

:deep(.el-table--small) {
  margin-top: 10px;
}
</style>
